<template>
  <view class="seasons-container">
    <!-- 使用swiper组件实现左右滑动切换 -->
    <swiper class="seasons-swiper" circular="true" :indicator-dots="true" :autoplay="false" @change="onSwiperChange">
      
      <!-- 秋季页面 -->
      <swiper-item>
        <qiutian></qiutian>
      </swiper-item>
      
      <!-- 冬季页面 -->
      <swiper-item>
        <dongtian></dongtian>
      </swiper-item>
      
      <!-- 春季页面 -->
      <swiper-item>
        <chongtian></chongtian>
      </swiper-item>
	<!-- 夏季页面 -->
	<swiper-item>
	  <xiatian></xiatian>
	</swiper-item>
    </swiper>
  </view>
</template>

<script>
  // 导入四个季节页面组件
  import qiutian from './qiutian.vue';
  import dongtian from './dongtian.vue';
  import chongtian from './chongtian.vue';
  import xiatian from './xiatian.vue';
  
  export default {
    components: {
      qiutian,
      dongtian,
      chongtian,
      xiatian
    },
    data() {
      return {
        currentIndex: 0, // 当前显示的页面索引
        seasonTitles: [ '荣誉启航', '成长足迹', '舌尖记忆','青春留声'] // 四个季节页面的标题
      };
    },
    onLoad() {
      // 页面加载时的逻辑
      // 初始化时设置第一个页面的标题
      this.updateNavigationBarTitle(this.seasonTitles[0]);
    },
    methods: {

      onSwiperChange(e) {
        this.currentIndex = e.detail.current;
        // 动态更新导航栏标题
        this.updateNavigationBarTitle(this.seasonTitles[this.currentIndex]);
      },
      // 更新导航栏标题的方法
      updateNavigationBarTitle(title) {
        uni.setNavigationBarTitle({
          title: title
        });
      }
    }
  };
</script>

<style scoped>
  .seasons-container {
    width: 100%;
    height: 150vh;
    overflow: hidden;
  }
  
  .seasons-swiper {
    width: 100%;
    height: 100%;
  }
  
  .season-content {
    width: 100%;
    height: 100%;
    position: relative;
  }
  
  .season-title {
    position: absolute;
    top: 30rpx;
    left: 50%;
    transform: translateX(-50%);
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    z-index: 10;
  }
  
  .background-scroll-view {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 0;
    margin: 0;
  }
  
  .background-image {
    width: 100%;
  }
</style>